<template>
  <div>
    <div style="margin: 2px;">
      <h1 style="font-size: 25px;text-align: center;">站点信息</h1>
      <!-- 站点状态下拉框 -->
      <el-select  style="float: left;"  @change="selectState(siteState)" v-model="siteState" clearable placeholder="选择站点状态">
        <el-option  v-for="sl in stateList" :key="sl.siteState" :label="sl.orderState" :value="sl.siteState">
        </el-option>
      </el-select>
      <el-button style="float: left; margin-left: 10px;margin-top: 10px;" @click="addSite"  type="primary">新增站点</el-button>
      <div  style="float: left;margin-left: 690px;">
        <el-input  style="float: left; " placeholder="请输入站点名称" @change="seachSiteName" prefix-icon="el-icon-search"  v-model="siteName" clearable> </el-input>
      </div>

    </div>
    <!-- 添加站点弹窗 -->
      <el-dialog title="新增站点信息" :visible.sync="showAdd" width="30%" :before-close="handleClose">
        <el-form ref="recycleInfo" :model="addSiteInfo" label-width="100px">
          <el-form-item label="站点名称">
            <el-input v-model="addSiteInfo.siteName"></el-input>
          </el-form-item>
          <el-form-item label="站点电话">
            <el-input v-model="addSiteInfo.sitePhone"></el-input>
          </el-form-item>
          <el-form-item label="站点地址">
            <el-input v-model="addSiteInfo.siteAddress"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>

    <!-- 站点列表 -->
    <el-table ref="multipleTable" :data="pageInfo.records" style="width: 100%;">
      <el-table-column type="index" width="40">
      </el-table-column>
      <el-table-column prop="siteName" label="站点名称" width="150">
      </el-table-column>
      <el-table-column prop="sitePhone" label="站点电话" width="150">
      </el-table-column>
      <el-table-column prop="siteAddress" label="站点地址" width="150">
      </el-table-column>
      <el-table-column prop="siteStore" label="站点评分" width="150">
      </el-table-column>
      <el-table-column prop="payAccount" label="站点支付账号" width="150">
      </el-table-column>
      <el-table-column prop="siteState" label="站点状态" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.siteState==0?'正常':scope.row.siteState==1?'禁用':'删除'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="营业时间" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.siteStartTime}}</span>—<span>{{scope.row.siteEndTime}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" >
        <template slot-scope="scope">
          <el-button  type="primary" size="small" @click="setSiteState(scope.row,0)" style="margin: 2px;">启用</el-button>
          <el-button  type="primary" size="small" @click="setSiteState(scope.row,1)" style="margin: 2px;">禁用</el-button>
          <el-button  type="danger" size="small"  @click="setSiteState(scope.row,2)" style="margin: 2px;">删除</el-button>
          <el-button  type="primary" size="small" @click="superAccount(scope.row.siteAccountDTO)" style="margin: 2px;">账号</el-button>
          <el-button  type="primary" size="small" @click="siteTypePrice(scope.row)" style="margin: 2px;">价目表</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 站点价目表弹窗 -->
      <el-dialog title="站点价目表信息" :visible.sync="dialogVisible" width="50%"  >
        <el-table ref="multipleTable" :data="siteKinds" style="width: 100%;">
          <el-table-column type="index" width="40">
          </el-table-column>
          <el-table-column prop="typeName" label="物品名称" width="150">
          </el-table-column>
          <el-table-column prop="typePrice" label="实收单价" width="150">
          </el-table-column>
          <el-table-column prop="unit" label="价格单位" width="150">
          </el-table-column>
          <el-table-column prop="typeImage" label="物品图片" width="220px">
            <template slot-scope="scope">
              <img style="width: 200px; height: 150px" :src="scope.row.typeImage"  :fit="fit">
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    <!-- 抽屉方向 -->
    <!-- <el-radio-group v-model="direction">
      <el-radio label="ltr">从左往右开</el-radio>
      <el-radio label="rtl">从右往左开</el-radio>
      <el-radio label="ttb">从上往下开</el-radio>
      <el-radio label="btt">从下往上开</el-radio>
    </el-radio-group> -->
    <!-- 抽屉 -->
   <el-drawer title="站点账号信息" :visible.sync="drawer" :direction="direction" :with-header="false">
      <div style="margin: 30px; width: 400px;">
      <el-form :label-position="labelPosition" disabled label-width="70px" :model="siteAccount">
         <el-form-item label="站点账号">
           <el-input v-model="siteAccount.siteAccount"></el-input>
         </el-form-item>
         <el-form-item label="账号角色">
           <el-input v-model="siteAccount.siteRole==0?'超级管理员':'普通管理员'"></el-input>
         </el-form-item>
         <el-form-item label="账号状态">
           <el-input v-model="siteAccount.state==0?'正常':siteAccount.state==1?'禁用':'删除'"></el-input>
         </el-form-item>
         <el-form-item label="创建时间">
           <el-input v-model="siteAccount.creatTime"></el-input>
         </el-form-item>
         <el-form-item label="更新时间">
           <el-input v-model="siteAccount.updateTime"></el-input>
         </el-form-item>
         <el-form-item label="操作人">
           <el-input v-model="siteAccount.operator"></el-input>
         </el-form-item>
       </el-form>
       <el-button  type="primary" size="small" @click="setAccountState(siteAccount,0)" style="margin: 2px;">启用</el-button>
       <el-button  type="primary" size="small" @click="setAccountState(siteAccount,1)" style="margin: 2px;">禁用</el-button>
       <el-button  type="danger" size="small"  @click="setAccountState(siteAccount,2)" style="margin: 2px;">删除</el-button>
       </div>
    </el-drawer>
    <!-- 分页 -->
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageInfo.current"
    :page-sizes="[1, 2, 3, 4]"
    :page-size="pageInfo.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'SelectSiteInfo',
    data() {
      return {
        addSiteInfo:{},
        showAdd:false,
        stateList:[
          {siteState:'0',orderState:'启用'},
          {siteState:'1',orderState:'禁用'},
          {siteState:'2',orderState:'删除'},
        ],
        fit: 'fill',
        dialogVisible:false,
        siteKinds:[],
        siteAccount:{},
        labelPosition: 'left',//表单对齐方式
        direction: 'rtl',//抽屉方向
        drawer: false,//抽屉开关
        pageInfo: {},
        siteState: '',
        siteName: '',
        sitePhone: ''
      }
    },
    methods: {
      //确定按钮
      confirm(){
        this.$http.post("/site/siteInfo/add.admin",this.addSiteInfo).then(resp=>{
          if (resp.data.code==200) {
            alert(resp.data.message)
            this.addSiteInfo = {}
            this.showSiteInfo()
            this.showAdd = false
          } else{
            alert(resp.data.message)
          }
        })
      },

      //取消按钮
      cancel(){
        this.addSiteInfo = {}
        this.showAdd = false
      },

      //新增按钮（站点信息弹框）
      addSite(){
        this.showAdd = true
      },

      // 弹框取消按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      //站点价目表
      siteTypePrice(row){
        this.$http.get("/site/siteKindsPrice/platSelect.admin/"+row.siteId).then(resp=>{
          if(resp.data.code == 200){
            console.log(resp.data.data)
            this.siteKinds = resp.data.data
          }else{
             this.siteKinds = []
          }
        })
        this.dialogVisible = true
      },

      //站点超管账号状态设置
      setAccountState(row,state){
        this.$http.post("/site/siteAccount/setAccountState.admin",{accountId:row.accountId,state:state}).then(resp=>{
          if(resp.data.code==200){
            this.showSiteInfo()
            this.drawer=false
            alert(resp.data.message)
          }else{
            alert(resp.data.message)
          }
        })
      },

      //账号信息
      superAccount(row){
        this.drawer = true
        this.siteAccount = row
      },

      //设置站点状态
      setSiteState(row,state){
        this.$http.post("/site/siteInfo/updateState.admin",{siteState:state,siteId:row.siteId}).then(resp=>{
          if(resp.data.code==200){
            this.showSiteInfo()
            alert(resp.data.message)
          }else{
            alert(resp.data.message)
          }
        })
      },

      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.showSiteInfo(this.pageInfo.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.showSiteInfo(val, this.pageInfo.size)
      },

      //搜索框
      seachSiteName(){
        this.common(null,null,this.siteState,this.siteName,this.sitePhone)
      },

      //下拉框
      selectState(siteState){
        this.common(null,null,siteState,this.siteName,this.sitePhone)
      },


      //查询所有站点信息
      showSiteInfo(current, size) {
        this.common(current, size, this.siteState, this.siteName, this.sitePhone)
      },

      //查询站点信息(公共)
      common(current, size, siteState, siteName, sitePhone) {
        this.$http.post("/site/siteInfo/platPageSelect.admin", {
          size: size,
          current: current,
          siteState: siteState,
          siteName: siteName,
          sitePhone: sitePhone
        }).then(resp => {
          if (resp.data.code == 200) {
            this.pageInfo = resp.data.data
          } else {
            this.pageInfo = {}
          }
        })
      }
    },
    created() {
      this.showSiteInfo()
    }
  }
</script>

<style>
</style>
